<template>
    <u-form :model="formModel" label-width="160" ref="dataForm">
        <u-form-item v-for="(form_v, form_k) in formConfig" :key="form_k" :label="form_v.label" :prop="form_v.field" v-show="form_v.form_show">
            <!--文本输入框-->
            <template v-if="form_v.form_type == 'input-text'">
                <u-input v-model="formModel[form_v.field]" type="text" :placeholder="form_v.form_placeholder" />
            </template>
            <!--数字输入框-->
            <template v-if="form_v.form_type == 'input-number'">
                <u-input v-model="formModel[form_v.field]" type="number" :placeholder="form_v.form_placeholder" />
            </template>
            <!--步进数字输入-->
            <template v-if="form_v.form_type == 'input-number-box'">
            	<u-number-box v-model="formModel[form_v.field]" :min="form_v.form_value_min" :max="form_v.form_value_max"></u-number-box>
            </template>
            <!--短信验证码-->
            <template v-if="form_v.form_type == 'input-sms-code'">
            	<u-input type="number" v-model="formModel[form_v.field]" :placeholder="form_v.form_placeholder"></u-input>
            	<u-button slot="right" type="success" size="mini" @click="smsSendFunc(form_v.form_phone, form_v.form_action)">{{ smsMessage }}</u-button>
            </template>
            <!--日期选择(未完成)-->
            <template v-if="form_v.form_type == 'select-picker-date'">
            	<u-input type="select" :select-open="form_v.form_select_open" v-model="form_v.form_result" :placeholder="form_v.form_placeholder" @click="form_v.form_select_open = true" />
            	<u-picker mode="time" v-model="form_v.form_select_open" :start-year="form_v.form_start_year" :end-year="form_v.form_end_year" :default-time="form_v.form_default_time" :title="form_v.form_select_title" @confirm="(event) => form_v.form_select_confirm(event, formModel)"></u-picker>
            </template>
            <!--日历选择-->
            <template v-if="form_v.form_type == 'select-calendar-date'">
                <u-input type="select" :select-open="form_v.form_select_open" v-model="form_v.form_result" :placeholder="form_v.form_placeholder" @click="form_v.form_select_open = true" />
                <u-calendar v-model="form_v.form_select_open" mode="date" :min-year="form_v.form_start_year" :max-year="form_v.form_end_year" :toolTip="form_v.form_select_title" @change="(event) => form_v.form_select_confirm(event, formModel)"></u-calendar>
            </template>
            <!--简单单列选择-->
            <template v-if="form_v.form_type == 'select-single-column'">
                <u-input type="select" :select-open="form_v.form_select_open" v-model="form_v.form_result" :placeholder="form_v.form_placeholder" @click="form_v.form_select_open = true" />
                <u-select mode="single-column" :list="form_v.form_select_option" :value-name="form_v.form_option_value_name||'value'" :label-name="form_v.form_option_label_name||'label'" :default-value="form_v.form_value||[0]" v-model="form_v.form_select_open" @confirm="form_v.form_select_confirm($event, formModel, formConfig)"></u-select>
            </template>
            <!--多列联动选择-->
            <template v-if="form_v.form_type == 'select-muitl-column-auto'">
                <u-input type="select" :select-open="form_v.form_select_open" v-model="form_v.form_result" :placeholder="form_v.form_placeholder" @click="form_v.form_select_open = true" />
                <u-select mode="mutil-column-auto" :list="form_v.form_select_option" :value-name="form_v.form_option_value_name||'value'" :label-name="form_v.form_option_label_name||'label'" v-model="form_v.form_select_open" :default-value="form_v.form_value||[0,0]" @confirm="(event) => form_v.form_select_confirm(event, formModel)"></u-select>
            </template>
            <!--下拉多项选择-->
            <template v-if="form_v.form_type == 'select-muitl-dorpdown'">
                <text>下拉多列</text>
            </template>
            <!--下方弹出选择-->
            <template v-if="form_v.form_type == 'select-muitl-popup'">
                <u-input type="select" :select-open="form_v.form_select_open" v-model="form_v.form_result" :placeholder="form_v.form_placeholder" @click="form_v.form_select_open = true" />
                <u-popup v-model="form_v.form_select_open" :mode="form_v.form_setting.mode || 'bottom'" :border-radius="form_v.form_setting.borderRadius || 10" :closeable="form_v.form_setting.closeable || true">
                    <view class="wo-panel-popup">
                        <view class="wo-panel-head u-border-bottom u-text-center">
                            <text>{{form_v.label}}</text>
                        </view>
                        <view class="wo-panel-body">
                            <template v-if="form_v.form_setting.option_element == 'button'">
                                <view class="u-padding-20" v-for="(option_v, option_k) in form_v.form_select_option" :key="option_k">
                                    <u-button :type="form_v.form_value.indexOf(option_v.value) != -1 ?  'success' : 'default'" @click="form_v.form_select_confirm(option_v, formModel)">{{option_v.label}}</u-button>
                                </view>
                            </template>
                            <template v-else>
                                <view class="" v-for="(option_v, option_k) in form_v.form_select_option" :key="option_k" @click="form_v.form_select_confirm(option_v, formModel)">
                                    <u-tag :text="option_v.label" :mode="form_v.form_value.indexOf(option_v.value) != -1 ?  'dark' : 'plain'" />
                                </view>
                            </template>
                        </view>
                    </view>
                </u-popup>
            </template>
        </u-form-item>
        <!--验证码获取-->
        <u-verification-code seconds="60" ref="smsCode" @change="smsMessageFunc" :keep-running="true"></u-verification-code>
    </u-form>
</template>

<script>
export default {
    name: 'data-form',
    data() {
        return {
            smsMessage: '',
            formRules: {
                brother_status: [
                    {
                        required: true,
                        message: '请设置是否为独生子女',
                        trigger: 'blur' ,
                    }
                ]
            },
            
        };
    },
    props: {
        formRef: {
            type: String,
            default: 'dataForm'
        },
        formModel: {
            type: Object,
            default: () => ({})
        },
        formConfig: {
            type: Object,
            default: () => ({})
        }
    },
    mounted() {
        this.$refs.dataForm.setRules(this.formRules);
    },
    methods: {
        formCheck() {
            console.log(this.formModel);
            return this.$refs.dataForm.validate(this.formModel, (errors, fields) => {
                console.log(errors, fields);
            });
        },
        async smsSendFunc(field, action) {
            let phone = '';
            if (this.formModel.hasOwnProperty(field)) {
                phone = this.formModel[field];
            }
            if (!phone || !this.$u.test.mobile(phone)) {
                this.$u.toast('请正确填写手机号码');
                return false;
            }
            if (this.$refs.smsCode.canGetCode) {
                uni.showLoading({
                    title: '正在获取验证码',
                });
                let smsResult = await this.$u.api.smsText({
                    action: action || '',
                    phone: phone
                });
                uni.hideLoading();
                if (!smsResult) {
                    return false;
                }
                this.$u.toast('验证码发送成功');
                this.$refs.smsCode.start();
            }
        },
        smsMessageFunc(text) {
            this.smsMessage = text;
        },
    }
};
</script>

<style lang="scss"></style>
